<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<form method="POST" action="/api/token/">
    {% csrf_token %}

    <input id="id_username" type="text" name="username"/><br>
    <input id="id_password" type="text" name="password"/>

    <input type="submit" value="提交"/>

    <button onclick="submitForm();">Ajax提交</button>
</form>


<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
    function submitForm(){
        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
        var user = $('#id_username').val();
        var pass = $('#id_password').val();

        console.log(csrf);
        console.log(user);
        console.log(pass);

        $.ajax({
            url: '/api/token/',
            type: 'POST',
            data: {
                "username":user,
                "password": pass,
                "csrfmiddlewaretoken": csrf,
            },
            success:function(arg){
                console.log(arg);
                alert(JSON.parse(arg));
            }
        })
    }

</script>

</body>
</html>